<template>
	<view class="partner-join__form-one">
		<view class="e-font-56 fw-600 e-m-b-76">
			{{ $t('store.szzhmm') }}
		</view>
		<view class="partner-join__form-one-item e-flex  e-m-b-20">
			<image class="img-36 e-m-r-30" src="../../static/phone.png"></image>
			<view class="e-flex" v-if="countryArea" @tap="$emit('openPicker')">
				<text>{{ countryArea.countryArea }}</text>
				<image class="img-16 e-m-r-10 e-m-l-10" :src="$staticPath('black-arrow.png')" mode=""></image>
			</view>
			<e-input type="number" v-model="form.phone" border="none" :placeholder="$t('public.请输入您的手机号')" />
		</view>
		<view class="partner-join__form-one-item e-flex  e-m-b-20">
			<image class="img-36  e-m-r-30" src="../../static/password.png"></image>
			<e-input v-model="form.password" border="none" :placeholder="$t('public.6-12位字母与数字组合')" :password="passwordShow" />
			<image class="img-32 " :src="passwordShow ? eyesIcon2 : eyesIcon1" @tap="passwordShow = !passwordShow"></image>
		</view>
		<view class="partner-join__form-one-item e-flex  e-m-b-20">
			<image class="img-36  e-m-r-30" src="../../static/shield.png"></image>
			<e-input v-model="form.validatorCode" border="none" :placeholder="$t('public.请输入验证码')" />
			<e-code
				unique-key="register"
				ref="uCode"
				:start-text="$t('public.获取验证码')"
				:change-text="$t('public.X秒重新获取')"
				:end-text="$t('public.重新获取')"
				@change="codeChange"
			></e-code>
			<button class="partner-join__form-one-code bg-primary e-font-24 c-white" :style="[boxShadowColor]" @tap="getCode">{{ codeTips }}</button>
		</view>
		<view class="partner-join__form-one-btn e-flex-xy-center bg-primary e-font-32 c-white" @tap="submit">
			<text>{{ $t('store.xyb') }}</text>
		</view>
	</view>
</template>

<script>
import { merchantRegisterSms } from '@/common/request/api';
export default {
	props: {
		primary: String,
		countryArea: Object
	},
	data() {
		return {
			passwordShow: true,
			eyesIcon1: require('../../static/open_eyes.png'),
			eyesIcon2: require('../../static/close_eyes.png'),
			codeTips: '',
			form: {
				phone: '',
				password: '',
				validatorCode: ''
			}
		}
	},
	computed: {
		boxShadowColor() {
			return {
				boxShadow: `0 12rpx 24rpx 0 ${this.primary.replace('1)', '0.3')}`
			}
		}
	},
	methods: {
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				if (!this.form.phone) {
					this.$toastApp(this.$t('public.请输入您的手机号'))
					return
				}
				merchantRegisterSms(this.countryArea?.id,this.form.phone).then(res => {
					if (res.code === 200) {
						this.$refs.uCode.start()
					}
					this.$toastApp(res.msg)
				})
			} else {
				this.$toastApp(this.$t('public.倒计时结束后再发送'))
			}
		},
		codeChange(text) {
			this.codeTips = text
		},
		submit() {
			if (!this.form.phone) {
				this.$toastApp(this.$t('public.请输入您的手机号'))
				return
			}
			if (!this.form.password) {
				this.$toastApp(this.$t('public.请输入密码'))
				return
			}
			if (!this.form.validatorCode) {
				this.$toastApp(this.$t('public.请输入验证码'))
				return
			}
			this.$emit('next', 2, this.form)
		}
	}
}
</script>

<style lang="scss" scoped>
.partner-join__form-one {
	&-item {
		height: 90rpx;
		border-bottom: 2rpx solid #eff0f2;
	}
	&-code {
		border-radius: 30rpx;
	}
	&-btn {
		height: 90rpx;
		margin-top: 80rpx;
		border-radius: 46rpx;
	}
}
</style>
